<template>
  <div class="single-select question-content">
    <Editable v-model="data.title" />
    <el-radio-group v-model="data.value" class="radio-group">
      <div
        v-for="item in options"
        :key="item.value"
        class="option"
        :class="`col${questionSetting.layout}`"
      >
        <el-radio :value="item.value"> </el-radio>
        <Editable class="label" v-model="item.label" @click="onClick(item)" />
      </div>
    </el-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useQuestionStore } from '@/stores/question'
const props = defineProps<{
  data: any
}>()
const options = props.data.data
const value = ref(options[0].value)

const questionSetting = computed(() => {
  return props.data.setting
})
const onClick = (item: any) => {
  value.value = item.value
}
</script>

<style lang="scss" scoped>
@import url(./questionCommon.scss);
.single-select {
  margin-bottom: 16px;
}
</style>
